<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>商品列表</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    function jiaxiang(wang){
        window.location.href=wang;
    }
    function disp_alert()
    {
    alert("无权限操作！")
    }
</script>
<style>
    .g{
        height: 100%;
        width: 20%;
        position: absolute;
        left: 0px;
        top: 0px;
    }
     .d{
        height: 6%;
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        border-bottom: 1px solid #ECECFF;
    }
    .a{
       width: 100% ;
       height: 25%;
       border: 1px solid#ECECFF;
       position: absolute;
	   top:10%;
       left: 0px;
       font-size: 8px;
    }
.b{
       width: 100%  ;
       height: 10%;
       border: 1px solid  #ECECFF;
       position: absolute;
	   top:40%;
       left: 0px;
    }
.c{
        height: 80%;
        width: 90%;
       border: 1px solid #ECECFF;
       position: absolute;
	   top:55%;
       left: 5%;
    }
.e{
    height: 10%;
    width: 50%;
    position:absolute;
    top: 135%;
    left:50%;
   
} 
.f{
  width: 100%;
  height: 100%;
  position: absolute;
} 
.points1{
    height: 90%;
    width: 95%;
    border: 1px solid #ECECFF;
    position: absolute;
    left: 2.5%;
    top: 5%;
}
.points2{
    height: 30px;
    width: 80px;
    position: absolute;
    left: 20px;
    top: 20px;
   
}
.s1{
    height: 30px;
    width: 70px;
    position: absolute;
    top: 20%;
    left:35px;
    font-size: 16px;
   
}
.s2{
    font-size: 14px;
    position: absolute;
    left: 5%;
    top: 20%;
}
.s3{
    font-size: 14px;
    position: absolute;
    left: 5%;
    top: 20%;
}
.s4{
    font-size: 14px;
    position: absolute;
    left: 5%;
    top: 20%;
}
.s5{
    font-size: 14px;
    position: absolute;
    left: 5%;
    top: 20%;
}
.s8{
    font-size: 14px;
    position: absolute;
    left: 5%;
    top: 30%;
}
.s9{
    font-size: 14px;
    position: absolute;
    left: 5%;
    top: 30%;
}
.s6{
    font-size: 16px;
    position: absolute;
    left: 3%;
    top: 30%; 
}
.s7{
    font-size: 14px;
    width: 50px;
    height: 25px;
    position: relative;
    float: left; 
}
.switch1{
    height: 30px;
    width: 40px;
    position: relative;
    float: right;
}

.points3{
    height: 17%;
    width: 15%;
    position: absolute;
    left:10%;
    top:25%;
    float:left;
}
.points4{
    height: 15%;
    width: 15%;
    position: absolute;
    left:10%;
    top:25%;
    margin-left: 20%;
}
.points5{
    height: 15%;
    width: 15%;
    position: absolute;
    left:10%;
    top:25%; 
    margin-left: 40%;
   
}
.points6{
    height: 15%;
    width: 15%;
    position: absolute;
    left:10%;
    top:25%; 
    margin-left: 60%;
}
.points8{
    height: 15%;
    width: 15%;
    position: absolute;
    left:10%;
    top:55%; 
   
}
.points9{
    height: 15%;
    width: 15%;
    position: absolute;
    left:10%;
    top:55%; 
    margin-left: 20%;
}
.points7{
    height: 80%;
    width: 95%;
    position: absolute;
    left: 2.5%;
    top: 10%;
    border: 1px solid  #ECECFF;
}
.t1{
    height: 25px;
    width: 60%;
    position: absolute;
    left:35%;
    top:4px;
    border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
}
.t2{
    height: 25px;
    width: 60%;
    position: absolute;
    left:35%;
    top:4px;
    border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
}
.t4{
    height: 25px;
    width: 60%;
    position: absolute;
    left:35%;
    top:4px;
    border-radius: 5px;
    border: 1px solid #ECECFF;
    outline: none;
}
.b1 {
    height: 30px;
    width: 90px;
    position: absolute;
    top: 10px;
    right: 60px;
    background-color: #7D7DFF;
    color: white;
    border-width: 0px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    font-size: 10px;
    top:25%;
    left:90%;
 }
 .b1:hover {
    background: #9393FF;
 }
 .b2 {
    height: 30px;
    width: 90px;
    position: absolute;
    top: 10px;
    right: 60px;
    background-color: #7D7DFF;
    color: white;
    border-width: 0px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    font-size: 10px;
    top:5%;
    left:95%;
 }
 .b2:hover {
    background: #9393FF;
 }
 .b3 {
    height: 30px;
    width: 40px;
    position: relative;
    background-color: #7D7DFF;
    color: white;
    border-width: 0px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    font-size: 10px;
    
 }
 .b3:hover {
    background: #9393FF;
 }
 .b4 {
    height: 30px;
    width: 40px;
    position: relative;
    background-color: #f7492b;
    color: white;
    border-width: 0px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    font-size: 10px;
    left:25%
 }
 .b4:hover {
    background:  #eb8370;
 }
 .b5 {
    height: 30px;
    width: 40px;
    position: relative;
    margin-left: 10px;
    background-color: #7D7DFF;
    color: white;
    border-width: 0px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    font-size: 10px;
    left: 25%;
 }
 .b5:hover {
    background:  #b9dff8;
 }




 .cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

 input.cmn-toggle-round + label {
  padding: 1px;
  width: 40px;
  height: 20px;
  background-color: #dddddd;
  border-radius: 20px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 40px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 20px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 20px;
}
.p1{
    height: 90px;
    width: 90px;
    position: relative;
    left: 20%;
}
.bq1{
    height: 30px;
    width: 90px;
    position: relative;
    float: left;
}
.bq2{
    height: 30px;
    width: 90px;
    position: relative;
    float: right;
}
.bq3{
    height: 30px;
    width: 90px;
    position: relative;
    float: right;
}
.tp1{
    height: 30px;
    width: 30px;
    position: absolute;
    top: 10%;
    left: 5%;
}
.tp2{
    height: 25px;
    width: 25px;
    position: absolute;
    top: 30%;
    left: 15px;
}
.tp3{
    height: 91px;
    width: 85px;
    position: relative;
    left: 26%;
    background-color: #8ce196;
}
.tp4{
    height: 97px;
    width:55px ;
    position: relative;
    left: 32%;
    background-color: #8ce196;
}
.tp5{
    height: 97px;
    width: 75px;
    position: relative;
    left: 45px;
    top: 0px;
    background-color: #8ce196;

}
.read{
    font-size: 16px;
    position: absolute;
    height: 70%;
    width: 80%;
    top: 6px;
    left: 40px;
    font-weight: bold;
}
.spname{
    width: 100px;
    height: 80px;
    position: relative;
    left:25%;
}

.seeke1{
    height: 100%;
    width: 20%;
    position: absolute;
    top: 0px;
    right: 5%;
}
.seeke2{
    height: 100%;
    width: 10%;
    position: absolute;
    top: 0px;
    right: 25%;
}
.seeke3{
    font-size: 13px;
    position: absolute;
    top: 28px;
    right: 14px;
}
</style>
</head> 

<body>
    <div class="d">
        <div class="g">
           <span class="read">首页 <span style="color: #ADADAD;">/</span> 商品 <span style="color: #ADADAD;">/</span> <span style="color: #ADADAD;font-weight: 200;font-size: 13px;">商品列表</span></span>
        </div>
    </div>
    <div class="a">
        <div class="points1">

            <button class="b1">提交</button>

             <div class="points2">
             <img src="放大镜.jpg" class="tp1">
              <div class="s1">筛选搜索</div>
             </div>

            <div class="points3">         
            <span class="s2">输入搜索:</span>      
            <input type="text" placeholder="商品名称" class="t1" value=""/>      
             </div>

            <div class="points4">
            <span class="s3">商品货号：</span>      
            <input type="text" placeholder="商品货号" class="t2" value=""/> 
            </div>

            <div class="points5">
            <span class="s4">商品类别:</span>
            <input type="text" placeholder="请选择" class="t4" list="l1"> 
            <datalist id="l1">
                <option>服装</option>
                <option>手机数码</option>
                <option>电器</option>
                <option>家具家装</option>
            </datalist>
            </div>

            <div class="points6">
            <span class="s5">商品品牌：</span>  
            <input type="text" placeholder="请输入" class="t4" value=""> 
            </div>

            <div class="points8">
            <span class="s8">上架状态：</span>  
            <input type="text" placeholder="全部" class="t4" list="l3"/> 
            <datalist id="l3">
                <option>上架</option>
                <option>下架</option>
            </datalist>
            </div>

            <div class="points9">
            <span class="s9">审核状态：</span>  
            <input type="text" placeholder="全部" class="t4" list="l4"/> 
            <datalist id="l4">
                <option>审核通过</option>
                <option>审核未通过</option>
            </datalist>
            </div>

        </div>                                                                                      
    </div>

    <div class="b">
        <div class="points7">
            <img src="4fbe7f760fd73ad01a53eea84932078.jpg" class="tp2"">
        <span class="s6">数据列表</span> 
        <input type="button" value="添加" class="b1" onclick="jiaxiang('添加商品1.html')">
        </div>
    </div>

    <div class="c">
        <div class="f">
        <table border="1" cellspacing="0" cellpadding="30"  bordercolor=#ECECFF width="100%" height="100%" >
            <tr>
                <th style="text-align: center;vertical-align: middle;">编号</th>
                <th style="text-align: center;vertical-align: middle;">商品图片</th>
                <th style="text-align: center;vertical-align: middle;">商品名称</th>
                <th style="text-align: center;vertical-align: middle;">价格</th>
                <th style="text-align: center;vertical-align: middle;">货号</th>
                <th style="text-align: center;vertical-align: middle;">标签</td>
                <th style="text-align: center;vertical-align: middle;">库存</th>
                <th style="text-align: center;vertical-align: middle;">销量</th>
                <th style="text-align: center;vertical-align: middle;">操作</th>
            </tr>
            <tr>
                <td style="text-align: center;vertical-align: middle;">1</td>
                <td>
                    <div class="tp3">
                        <img src="手机.jpg" style="width: 100%; height: 100%;">
                    </div>
                </td>
                <td>
                    <div class="spname">
                    华为 HUAWEI P20
                    </div>
                </td>
                <td style="text-align: center;vertical-align: middle;">价格：￥3200</td>
                <td style="text-align: center;vertical-align: middle;">货号：64100</td>
                <td>
                <div class="p1">
                 <div class="bq1">
                        <span class="s7">上架：</span> 
                    <div class="switch1">
                        <div class="switch">
                        <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
                        <label for="cmn-toggle-1"></label>
                        </div>
                      
                        <div class="switch">
                        <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                        <label for="cmn-toggle-4"></label>
                        </div>
                      
                        <div class="switch">
                        <input id="cmn-toggle-7" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                        <label for="cmn-toggle-7" data-on="Yes" data-off="No"></label>
                        </div>
                    </div>
                    
                 </div>
                 <div class="bq2">
                    <span class="s10">新品：</span> 
                  <div class="switch1">
                    <div class="switch">
                    <input id="cmn-toggle-12" class="cmn-toggle cmn-toggle-round" type="checkbox">
                    <label for="cmn-toggle-12"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-42" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                    <label for="cmn-toggle-42"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-72" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-72" data-on="Yes" data-off="No"></label>
                    </div>
                </div>
             </div>
                    
             <div class="bq3">
                <span class="s11">推荐：</span> 
              <div class="switch1">
                <div class="switch">
                <input id="cmn-toggle-11" class="cmn-toggle cmn-toggle-round" type="checkbox">
                <label for="cmn-toggle-11"></label>
                </div>
              
                <div class="switch">
                <input id="cmn-toggle-14" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                <label for="cmn-toggle-14"></label>
                </div>
              
                <div class="switch">
                <input id="cmn-toggle-17" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                <label for="cmn-toggle-17" data-on="Yes" data-off="No"></label>
                </div>
            </div>
         </div>
        </div>          
                </td>
                <td style="text-align: center;vertical-align: middle;">
                    <button class="b3">编辑</button>
                </td>
                <td style="text-align: center;vertical-align: middle;">0</td>
                <td>
                    <input type="button" onclick="disp_alert()" class="b4" value="删除">
                    <input type="button" value="编辑" class="b5" onclick="jiaxiang('添加商品1.html')">
                </td>  
            </tr>
            <tr>
                <td style="text-align: center;vertical-align: middle;">2</td>
                <td>
                    <div class="tp4">
                        <img src="小米手机.jpg" style="height: 100%; width: 100%;"/>
                    </div> 
                </td>
                <td>
                    <div class="spname">
                    小米8 全面屏游戏智能手机
                    </div>
                </td>
                <td style="text-align: center;vertical-align: middle;">价格：￥3000</td>
                <td style="text-align: center;vertical-align: middle;">货号：64101</td>
                <td>
                <div class="p1">
                 <div class="bq1">
                        <span class="s7">上架：</span> 
                    <div class="switch1">
                        <div class="switch">
                        <input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-round" type="checkbox">
                        <label for="cmn-toggle-3"></label>
                        </div>
                      
                        <div class="switch">
                        <input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                        <label for="cmn-toggle-5"></label>
                        </div>
                      
                        <div class="switch">
                        <input id="cmn-toggle-8" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                        <label for="cmn-toggle-8" data-on="Yes" data-off="No"></label>
                        </div>
                    </div>
                 </div>
                 <div class="bq2">
                    <span class="s10">新品：</span> 
                  <div class="switch1">
                    <div class="switch">
                    <input id="cmn-toggle-10" class="cmn-toggle cmn-toggle-round" type="checkbox">
                    <label for="cmn-toggle-10"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-40" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                    <label for="cmn-toggle-40"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-70" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-70" data-on="Yes" data-off="No"></label>
                    </div>
                </div>
             </div>     
             <div class="bq3">
                <span class="s11">推荐：</span> 
              <div class="switch1">
                <div class="switch">
                <input id="cmn-toggle-13" class="cmn-toggle cmn-toggle-round" type="checkbox">
                <label for="cmn-toggle-13"></label>
                </div>
              
                <div class="switch">
                <input id="cmn-toggle-43" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                <label for="cmn-toggle-43"></label>
                </div>
              
                <div class="switch">
                <input id="cmn-toggle-73" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                <label for="cmn-toggle-73" data-on="Yes" data-off="No"></label>
                </div>
            </div>
         </div>
        </div>         
                </td>
                <td style="text-align: center;vertical-align: middle;">
                    <button class="b3">编辑</button>
                </td>
                <td style="text-align: center;vertical-align: middle;">0</td>
                <td>
                    <input type="button" onclick="disp_alert()" class="b4" value="删除">
                    <input type="button" value="编辑" class="b5" onclick="jiaxiang('添加商品1.html')">
                </td>  
                </td>
               
            </tr>
            <tr>
                <td style="text-align: center;vertical-align: middle;">3</td>
                <td>
                    <div class="tp5">
                        <img src="半袖.jpg" style="height: 100%; width: 100%;">
                    </div>
                </td>
                <td>
                    <div class="spname">
                    HLA海澜之家简约动物印花短袖T恤
                    </div>
                </td>
                <td style="text-align: center;vertical-align: middle;">价格：￥159</td>
                <td style="text-align: center;vertical-align: middle;">货号：64102</td>
                <td>
                <div class="p1">
                 <div class="bq1">
                        <span class="s7">上架：</span> 
                    <div class="switch1">
                        <div class="switch">
                        <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox">
                        <label for="cmn-toggle-2"></label>
                        </div>
                      
                        <div class="switch">
                        <input id="cmn-toggle-44" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                        <label for="cmn-toggle-44"></label>
                        </div>
                      
                        <div class="switch">
                        <input id="cmn-toggle-74" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                        <label for="cmn-toggle-74" data-on="Yes" data-off="No"></label>
                        </div>
                    </div>
                 </div>
                 <div class="bq2">
                    <span class="s10">新品：</span> 
                  <div class="switch1">
                    <div class="switch">
                    <input id="cmn-toggle-15" class="cmn-toggle cmn-toggle-round" type="checkbox">
                    <label for="cmn-toggle-15"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-45" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                    <label for="cmn-toggle-45"></label>
                    </div>
                  
                    <div class="switch">
                    <input id="cmn-toggle-75" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                    <label for="cmn-toggle-75" data-on="Yes" data-off="No"></label>
                    </div>
                </div>
             </div>
                    
             <div class="bq3">
                <span class="s11">推荐：</span> 
              <div class="switch1">
                <div class="switch">
                <input id="cmn-toggle-16" class="cmn-toggle cmn-toggle-round" type="checkbox">
                <label for="cmn-toggle-16"></label>
                </div>
              
                <div class="switch">
                <input id="cmn-toggle-46" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                <label for="cmn-toggle-46"></label>
                </div>
              
                <div class="switch">
                <input id="cmn-toggle-76" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
                <label for="cmn-toggle-76" data-on="Yes" data-off="No"></label>
                </div>
            </div>
         </div>
        </div>          
                </td>
                <td style="text-align: center;vertical-align: middle;">
                    <button class="b3">编辑</button>
                </td>
                <td style="text-align: center;vertical-align: middle;">0</td>
                <td>
                    <input type="button" onclick="disp_alert()" class="b4" value="删除">
                    <input type="button" value="编辑" class="b5" onclick="jiaxiang('添加商品1.html')">
                </td>  
                </td>             
            </tr>
        </table>
        </div>
    </div>

    <div class="e">
        <div class="seeke2">
            <span class="seeke3">共 6 条</span>
        </div>
        <div class="seeke1">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                  <li>
                    <a href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
        </div>

    </div>
    

</body>
</html